
<template>
  <div class="common-layout">
    <el-container class="el-container">
      <!-- <el-aside class="el-aside" width="200px">
      </el-aside> -->
      <el-container>
        <el-header class="el-header">
          <img src="..\assets\images\天津滨海国际公司.png" />
          <div class="welcom-style">欢迎来到天津滨海国际机场</div>
          <div class="router-link">
            <router-link to="/login">管理页面</router-link>
          </div>
        </el-header>
        <!-- 轮播 -->
        <el-main class="el-main">
          <!-- 表格主内容 -->
          <div class="common-layout">
            <el-container>
              <el-header>
                <el-breadcrumb class="el-bread">
                  <el-breadcrumb-item>当前位置：</el-breadcrumb-item>
                  <el-breadcrumb-item>航班信息</el-breadcrumb-item>
                  <el-breadcrumb-item>每日航班信息</el-breadcrumb-item>
                  <el-breadcrumb-item>XXX</el-breadcrumb-item>
                  <!-- <el-breadcrumb-item
                    v-for="(item, index) in breadcrumbList"
                    :key="index"
                    @click="handleItemClick(item, index)"
                  >
                    {{ item }}
                  </el-breadcrumb-item> -->
                </el-breadcrumb>
              </el-header>
              <el-container>
                <el-aside width="200px">
                  <el-text style="font-size: 100"
                    ><img
                      src="..\assets\images\飞机图标.png"
                    />航班信息</el-text
                  >
                  <el-tree
                    :data="datatree"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                  ></el-tree>
                </el-aside>
                <el-main>
                  <div>
                    <el-form ref="form" :model="form" label-width="100px">
                      <el-form-item label="请输入航班号:">
                        <el-row>
                          <el-col :span="50">
                            <el-input style="width: 200%" v-model="form.dfltFlno"></el-input>
                          </el-col>
                        </el-row>
                        <el-col :span="10">
                          <el-button class="btn1" type="primary" @click="onSubmit"
                          >查询</el-button
                          >
                        </el-col>
                      </el-form-item>
                      <div class="link-top"></div>
                      <el-form-item label="起始站">
                        <el-input style="width: 400px" v-model="form.apcd"></el-input>
                      </el-form-item>

                      <el-form-item label="日期">
                        <el-col :span="13">
                          <el-date-picker
                              type="date"
                              placeholder="选择日期"
                              v-model="form.dtime"
                              style="width: 200px"
                              @change="updateDateTime"
                          ></el-date-picker>
                        </el-col>
                      </el-form-item>

                      <el-form-item label="起飞/降落时间">
                        <el-col :span="13">
                          <el-time-picker
                              placeholder="选择起飞时间"
                              v-model="form.startDate"
                              style="width: 200px"
                              :picker-options="{ start: '00:00', step: '00:15', end: '23:59' }"

                          ></el-time-picker>
<!--                          <el-time-picker-->
<!--                              placeholder="选择降落时间"-->
<!--                              v-model="form.endDate"-->
<!--                              style="width: 200px"-->
<!--                              :picker-options="{ start: '00:00', step: '00:15', end: '23:59' }"-->

<!--                          ></el-time-picker>-->
                        </el-col>
                      </el-form-item>

                      <el-form-item>
                        <el-button type="primary" @click="onSubmit">搜索</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                  <!-- 数据表 -->
                  <el-table
                    ref="singleTable"
                    :data="tableData"
                    highlight-current-row
                    style="width: 100%"
                  >
<!--                    <el-table-column-->
<!--                      property="dfltCfno"-->
<!--                      label="飞机号"-->
<!--                      width="100"-->
<!--                    >-->
<!--                    </el-table-column>-->
                    <el-table-column
                      property="dfltFlno"
                      label="航班号"
                      width="100"
                    >
                    </el-table-column>
                    <el-table-column
                      property="dfltAwcd"
                      label="航空公司"
                      width="200"
                    >
                    </el-table-column>
                    <el-table-column property="apcd" label="航线" width="150">
                    </el-table-column>
                    <el-table-column property="dtime" label="日期" width="200">
                    </el-table-column>
                    <el-table-column
                      property="fptt"
                      label="计划起飞时间"
                      width="220"
                    >
                    </el-table-column>
                    <el-table-column
                      property="frtt"
                      label="实际起飞时间"
                      width="220"
                    >
                    </el-table-column>
                  </el-table>
                  <!-- 分页组件 -->
                  <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="count"
                    :current-page="page"
                    :pageCount="pageCount"
                    @current-change="changePage"
                  >
                  </el-pagination>
                </el-main>
              </el-container>
            </el-container>
          </div>
        </el-main>

        <el-footer class="el-footer"> </el-footer>
      </el-container>
    </el-container>
  </div>
</template>


<style>
.el-header {
  background-color: #ffffff;
  /* 给头部设置一下弹性布局 */
  display: flex;
  /* 让它贴标左右对齐 */
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
}
.btn1 {
  margin-top: 80px;
  margin-left: -190px;
}
.link-top {
  width: 100%;
  height: 30px;
  border-top: 6px dashed #ccc;
  border-bottom: 10px;
  top: 10px;
}
.common-layout,
.el-container {
  height: 100vh;
}
.demo-image {
  height: auto;
}
.welcom-style {
  position: absolute;

  top: 4px;
  left: 50%;
  font-size: 24px;
  color: #333;
  transform: translateX(-50%);
}
.router-link {
  float: right;
  font-size: 18px;
  color: #333;
}

.el-bread {
  color: #333;
  font-size: 18px;
  font-weight: 600;
  padding: 10px 0;
  margin: 0;
}
</style>

<script>

 import { ElMessageBox } from 'element-plus'
 import axios from "axios";
 const locationNames = {
   '杭州': 'HGH',
   '深圳': 'SZX',
   '香港': 'HKG',
   '台北松山':'TSA',
   '上海虹桥': 'SHA',
   '昆明':'KMG',
   '西安':'XIY',
   '太原':'TYN',
   '桂林':'KWL',
   '大连':'DLC',
   '重庆':'CKG',
   '福州':'FOC',
   '呼和浩特':'HET',
   '长春':'CGQ',
   '长沙':'CSX',
   '锡林浩特':'XIL',
   '厦门':'XMN',
   '西宁':'XNM',
   '日照':'RIZ',
   '成都':'CTU',
   '乌鲁木齐':'URC',
   '朝阳':'CHG',
   '吕梁':'LLV',
   '乌兰浩特':'HLH',
   '贵阳':'KWE',
   '长治':'CIH',
   '宁波':'NGB',
   '广州':'CAN',
   '哈尔滨':'HRB',
   '铜仁':'TEN',
   '沈阳':'SHE',
   '武汉':'WUH',
   '南昌':'KHN',
   '兰州':'LHW',
   '宜昌':'YIH',
   '赤峰':'CIF',
   '珠海':'ZUH',
   '青岛':'TAO',
   '芽庄':'CXR',
   '鄂尔多斯':'DSN',
   '郑州':'CGO',
   '上海浦东':'PVG',
   '大庆':'DQA',
   '南宁':'NNG',
   '大阪':'KIX',
   '海口':'HAK',
   '天水':'THQ',
   '阿尔山':'YIE',
   '石家庄':'SJW',
   '银川':'INC',
   '十堰':'WDS',
   '固原':'GYU',
   '东京成田':'NRT',
   '名古屋':'NGO',
   '义乌':'YIW',
   '南通':'NTG',
   '天津':'TSN',
 };
 export default {

  data() {
    return {
      selectLabel:0,
      tableDataType:1,
      formLabelWidth: "120px", //表单文本宽度
      tableData: [{}], //图书分页数据
      count: 0, //记录总数
      page: 1, //当前页码
      pageCount: "", //总页数
      // data: [], //存放分页数据
      categoryData: "",
      childrenList: ["国际离港", "国内离港", "国际到港", "国内到港"],
      labelList: ["每日航班信息", "通用航空公司"],
      defaultList: ["当前位置", "航班信息"], //默认的导航栏路径
      breadcrumbList: [], //动态的导航栏路径

      defaultProps: {
        children: "children",
        label: "label",
      },
      form: {
        dfltAwcd: "",
        dfltFlno: "",
        apcd: "",
        startDate: "",
        // endDate: "",
        dtime: "2017-06-01T00:00:00.000Z",
      },
      active: "",
      datatree: [
        {
          label: "每日航班信息",
          children: [
            {
              label: "国内/国际离港",
              dataUrl: "http://localhost:8888/dfdl2/getA",
            },
            {
              label: "国内/国际到港",
              dataUrl: "http://localhost:8888/dfdl2/getD",
            },
          ],
        },
        {
          label: "通用航空公司",
          children: [
            {
              label: "通航航空公司",
              dataUrl: "",
            },
          ],
        },
      ],
    };
  },

  methods: {
    handleItemClick() {},
    handleNodeClick(label, dataUrl) {
      // console.log(dataUrl.data.label);
      if (
        dataUrl.data.label != "每日航班信息" &&
        dataUrl.data.label != "通用航空公司"
      ) {
        // console.log(dataUrl);
        this.active = dataUrl.data.dataUrl;
        this.fetchData(this.active);
        if(dataUrl.data.label=="国内/国际离港"){
          this.selectLabel=1;
        } else if (dataUrl.data.label=="国内/国际到港"){
          this.selectLabel=2;
        }
      }
    },
    changePage(currentPage) {
      this.page = currentPage;
      switch (this.tableDataType){
        case 1:
          this.fetchData();
          break;
        case 2:
          this.onSubmit();
          break;
      }
    },
    fetchData() {
      const pageNum = this.page;
      const pageSize = 10; // 设置每页显示的数据条数
      this.$axios
        .get(this.active || "", { params: { pageNum, pageSize } })
        .then((response) => {
          const result = response.data.data;
          this.count = result.size;
          this.pageCount = Math.ceil(result.total / pageSize);
          this.tableData = result.list;
          this.tableDataType=1;
          console.info(this.tableData);
        })
        .catch((error) => {
          console.error(error);
        });
    },
    combiningStrings(date){
      var mon= date.substring(4,7);
      var year = date.substring(11,15);
      var day = date.substring(8,10);
      var detail = date.substring(16,24);
      let detail1=date.substring(16,18);
      let detail2=date.substring(19,21);
      let detail3=date.substring(22,24);
      // console.info(detail);
      // console.info(day);
      // console.info(year);
      switch (mon) {
        case"Jan":
          mon="01";
          break;
        case "Feb":
          mon="02";
          break;
        case "Mar":
          mon="03";
          break;
        case "Apr":
          mon="04";
          break;
        case "May":
          mon="05";
          break;
        case "Jun":
          mon="06";
          break;
        case "Jul":
          mon="07";
          break;
        case "Aug":
          mon="08";
          break;
        case "Sep":
          mon="09";
          break;
        case "Oct":
          mon="10";
          break;
        case "Nov":
          mon="11";
          break;
        case "Dec":
          mon="12";
          break;
      }
      console.info(mon);
      let combineDate =(year+mon+day+detail1+detail2+detail3);
      return combineDate;
    },
    transform(newLocation){
      if (locationNames[newLocation]){
        const englishLocation = locationNames[newLocation];
        return englishLocation;
      }
    },
    onSubmit() {
      const pageNum = this.page;
      const pageSize = 10;
      const dfltFlno = this.form.dfltFlno;
      const dtime = this.form.dtime;
      const apcd = this.form.apcd;
      const fptt = this.form.startDate;
      const fplt = this.form.endDate;
      const dfltAwcd = "";
      this.$axios
          .get("http://localhost:8888/dfdl/selectA2401", {
            params: {
              dfltFlno,
              dtime,
              dfltAwcd,
              apcd,
              fptt,
              fplt,
              pageNum,
              pageSize,
            },
          })
          .then((response) => {
            const result = response.data.data;
            console.info(result);
            if(response.data.status!=10000){

              this.$message.error({
                type:"error",
                message:"查询失败，没有数据"
              })
            }
            //   console.info(result);
            this.count = result.size;
            this.pageCount = Math.ceil(result.total / pageSize);
            this.tableData = result.list;
            if(result.list.length!=0 && !this.called){
              this.tableDataType=2;
              this.$message.success({
                type:"success",
                message:"查询成功"
              })
              this.called=true;
            }

          });
    },
  //   onSubmit(){
  //     const pageNum = this.page;
  //     const pageSize = 10; // 设置每页显示的数据条数
  //     var dfltAwcd = this.form.dfltAwcd;
  //     var apcd = this.form.apcd;
  //     var fptt=this.form.startDate;
  //     var fplt =this.form.endDate;
  //     if (apcd in locationNames){
  //       apcd=this.transform(apcd);
  //     }else {
  //       apcd=this.form.apcd;
  //       console.info(apcd);
  //     }
  //     if (fptt!=null&&fptt !=""){
  //        fptt = this.combiningStrings(fptt.toString());
  //       if (fplt==""){
  //         fplt=this.combiningStrings(new Date().toString());
  //
  //       }else { fplt = this.combiningStrings(fplt.toString());
  //       }
  //     }else{ if(fplt!=null&&fplt!=""){
  //       fptt="00000000000000";
  //       fplt = this.combiningStrings(fplt.toString());
  //     }
  //     }
  //     if (dfltAwcd==""&&apcd==""&&fptt==""&&fplt==""){
  //      this.fetchData();
  //     } else {
  //       switch (this.selectLabel) {
  //         case 1:
  //           this.$axios.get("http://localhost:8888/dfdl/selectA2401", {
  //             params: {
  //               dfltAwcd,
  //               apcd,
  //               fptt,
  //               fplt,
  //               pageNum,
  //               pageSize
  //             }
  //           })
  //               .then((response) => {
  //                 console.info(response);
  //                 const result = response.data.data;
  //                 console.info(result);
  //                 this.count = result.size;
  //                 this.pageCount = Math.ceil(result.total / pageSize);
  //                 this.tableData = result.list;
  //                 this.tableDataType = 2;
  //                 console.info(this.tableData);
  //               }).catch((error) => {
  //             console.error(error);
  //           });
  //           break;
  //         case 2:
  //           this.$axios.get("http://localhost:8888/dfdl/selectD2401", {
  //             params: {
  //               dfltAwcd,
  //               apcd,
  //               fptt,
  //               fplt,
  //               pageNum,
  //               pageSize
  //             }
  //           })
  //               .then((response) => {
  //                 console.info(response);
  //                 const result = response.data.data;
  //                 console.info(result);
  //                 this.count = result.size;
  //                 this.pageCount = Math.ceil(result.total / pageSize);
  //                 this.tableData = result.list;
  //                 this.tableDataType = 2;
  //                 console.info(this.tableData);
  //               })
  //           break;
  //       }
  //     }
  //
  // },
    onSubmitFlno(){
      const pageNum = this.page;
      const pageSize = 10; // 设置每页显示的数据条数
      console.info(this.tableData);
      console.info(111);
      var dfltFlno = this.form.dfltFlno;
      switch (this.selectLabel){
        case 1:
          this.$axios.get("http://localhost:8888/dfdl/selectD2401ByFlno",{params:{dfltFlno,pageNum,
              pageSize}}).then((response) => {
            const results = response.data.data;;
            this.count = results.size;
            this.pageCount = Math.ceil(results.total / pageSize);
            this.tableData = results.list;
            console.info(this.tableData);
          }).catch((error) => {
            console.error(error);
          });
          break;
        case 2:
          this.$axios.get("http://localhost:8888/dfdl/selectA2401ByFlno",{params:{dfltFlno,pageNum,
              pageSize}})
              .then((response) =>{
                const result1 = response.data.data;
                this.count = result1.size;
                this.pageCount = Math.ceil(result1.total / pageSize);
                this.tableData = result1.list;
                console.info(this.tableData);
              }).catch((error) => {
            console.error(error);
          });
              break;
      }
    }
  },
  mounted() {
    const objApp = this;
    // this.changePage(1);
    ElMessageBox.alert("如需查看更多信息，请登录后查看", "提示", {
      confirmButtonText: "确定",
    });
  },
};
</script>



